<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>租车网首页</title>
    <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
    <!--引入awesome图标库的样式表-->
    <link rel="stylesheet" th:href="@{/res/font-awesome-4.7.0/css/font-awesome.css}">
</head>

<style>


</style>

<body>

<!---定义最外面的容器,container-->
<div class="layui-col-md12" style="padding: 0px; background-color: #F2F2F2;">
    <!--以下包含导航栏页面-->
    <ul th:replace="commons/nav :: common_nav">

    </ul>

    <!--下面是登录和注册的容器-->
    <div class="layui-col-md4 layui-col-md-offset4" style="background-color: #FFF">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="login_tab">用户登录</li>
                <li lay-id="reg_tab">用户注册</li>

            </ul>
            <div class="layui-tab-content" style="height:360px;">
                <div class="layui-tab-item layui-show">

                    <form id="loginForm" class="layui-form" action="#" lay-filter="example">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" lay-verify="title" autocomplete="off"
                                       placeholder="请输入用户名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" lay-verify="title" autocomplete="off"
                                       placeholder="请输入密码" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <img th:src="@{/defaultKaptcha}" alt="验证码" title="看不清楚，点击换一张" style="cursor: pointer;"
                                     onclick="this.src='../defaultKaptcha?d='+new Date()*1"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">验证码</label>
                            <div class="layui-input-block">
                                <input type="text" name="validatecode" lay-verify="title" autocomplete="off"
                                       placeholder="请输入验证码" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">请记住我</label>
                            <div class="layui-input-block" style="text-align:left">
                                <input type="checkbox" name="rememberme" lay-skin="switch" lay-text="是|否">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">

                                <!--注意：这个按钮一定要有lay-submit属性，表示是一个提交按钮，lay-filter表示是一个过滤层，类似于以前使用的ID属性。-->
                                <button class="layui-btn" lay-submit="" id="bt_login" lay-filter="login_form">登录
                                </button>
                            </div>
                        </div>

                    </form>
                </div>


                <div class="layui-tab-item">
                    <form id="regForm" class="layui-form" action="#" lay-filter="example">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" lay-verify="required|checkusername"
                                       autocomplete="off"
                                       placeholder="请输入用户名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" id="password" name="password" lay-verify="required|checkpassword"
                                       autocomplete="off"
                                       placeholder="请输入密码" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="confirmpass" lay-verify="checkconfirmpass"
                                       autocomplete="off" placeholder="请输入确认密码" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电子邮箱</label>
                            <div class="layui-input-block">
                                <input type="email" name="email" lay-verify="email" autocomplete="off"
                                       placeholder="请输入电子邮箱"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">出生日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="birthday" lay-verify="required" class="layui-input" id="test1"
                                       placeholder="yyyy-MM-dd">
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <div class="layui-input-block">

                                <button class="layui-btn" lay-submit="" lay-filter="reg_form">注册</button>

                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--网站页面尾部开始-->
<div id="footer" class="layui-col-md12" style=" background-color: #666; height:120px;">
    <div class="copyright" style=" background-color: #666; height:120px;">
        <div class="layui-col-md4" style="text-align: right">
            <b style="color: rgb(34, 34, 34); font-size: 32px; display: block;">
                <font color="#ff6537" style="color: rgb(255, 101, 55);">预订说明</font>
            </b>
            <b style="color: rgb(34, 34, 34); font-size: 32px; display: block;"><span
                    style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                    style="">
                        <font face="Arial">
                            <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
                        </font>
                    </span>
            </b>
            <b style="color: rgb(34, 34, 34); font-size: 32px;  display: block;">
                <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                    style="">

                    </span>
            </b>
        </div>

        <div class="layui-col-md4">
            <div>
                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;">
                    <font color="#ff6537" style="color: rgb(255, 101, 55);">联系我们</font>

                </b>
                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;"><span
                        style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                        style="">
                            <font face="Arial">
                                <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
                            </font>
                        </span>
                </b>

                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;">
                    <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                        style="">

                        </span>
                </b>
            </div>

        </div>

        <div class="layui-col-md4">
            <div>
                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;">
                    <font color="#ff6537" style="color: rgb(255, 101, 55);">帮助中心</font>

                </b>
                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;"><span
                        style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                        style="">
                            <font face="Arial">
                                <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
                            </font>
                        </span>
                </b>

                <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;">
                    <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                        style="">

                        </span>
                </b>
            </div>

        </div>
    </div>

    <div class="copyright" style="padding: 20px;color:#FFF; background-color: #666; height:20px; text-align: center">
        ©2018 网站样板-汽车买卖租赁版权所有 &nbsp;&nbsp; [<a th:href="@{/admin/toMain}" style="color:#FFF">后台管理</a>]

    </div>
</div>
<!--网站页面尾部结束-->


<script th:src="@{/res/layui/layui.js}"></script>


<script th:inline="javascript">
    //一般直接写在一个js文件中
    layui.use(['layer', 'element', 'form', 'laydate'], function () {
        var layer = layui.layer,
            form = layui.form;
        var element = layui.element;
        var laydate = layui.laydate;
        //常规用法
        laydate.render({
            elem: '#test1'
        });

        //layui中怎么使用jquery.
        var $ = layui.jquery;

        /*<![CDATA[*/
        var loginUrl = /*[[@{/users/login}]]*/;//获取动作地址
        var loginSuccessUrl = /*[[@{/toIndex}]]*/;
        /*]]>*/


        //监听用户登录表单的提交动作。
        form.on('submit(login_form)', function (data) {
            /*
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })*/

            $.ajax({

                url: loginUrl, //执行的后台动作的地址
                async: true, //是否是异步提交
                data: {param: JSON.stringify(data.field)},
                dataType: 'json',
                success: function (resp) {  //客户端压根没有收到服务器返回的字符串 "ok",为啥？
                    //console.info(resp); //给浏览器控制台输出调试内容。
                    //layer.alert(resp.meta.success);
                    if (resp.meta.success) {
                        //layer.alert('登录成功！');
                        window.location.href = loginSuccessUrl;
                    } else if (resp.meta.message == 'validateCodeError') {
                        layer.open({
                            title: '提示信息'
                            , content: '验证码不正确！'
                        });
                    }
                    else {
                        //layer.alert('登录失败！');
                        layer.open({
                            title: '提示信息'
                            , content: '登录失败，请检查用户名或者密码是否正确！'
                        });
                    }
                }
            });

            return false;
        });


        //以下是用户注册表单的验证和提交事件的处理////////////////////////////////////////////////////

        //用户注册表单的自定义验证规则
        /*<![CDATA[*/
        var checkUsernameIsExistUrl = /*[[@{/users/checkUsernameIsExist}]]*/;//获取动作地址
        /*]]>*/

        form.verify({
            checkusername: function (value) {
                if (value.length < 4) {
                    return '用户名不能少于4位';
                }
                //接着检查该用户名是否已经被占用。
                var flag = true; //默认该用户名不可以。
                $.ajax({
                    url: checkUsernameIsExistUrl,
                    data: {username: value},
                    async: false, //为啥必须是同步的。异步行吗？
                    dataType: 'json',
                    success: function (resp) {
                        //这里你可以获得服务器给你返回的一个boolean值，
                        //如果是真，表示该用户名可用，如果是假，该用户名被占用了。
                        console.info(resp.meta.success);
                        if (resp.meta.success) {
                            console.info('修改flag值为false');
                            flag = false;
                        }
                    }

                });
                /*
                * 如果是假，返回一个字符串。
                * 如果是真，则什么都不返回，验证通过了。
                * */
                if (flag) {
                    return "该用户名已经被占用";
                }
            },
            checkpassword: function (value) {
                if (value.length < 6) {
                    return '密码不能少于6位';
                }
            },
            checkconfirmpass: function (value) {
                var pass = $("#password").val();
                if (value != pass) {
                    return '确认密码与输入密码不一致';
                }
            }

        });

        /*<![CDATA[*/
        var regUrl = /*[[@{/users/reg}]]*/;//获取动作地址
        var regSuccessUrl = /*[[@{/users/toLogin}]]*/;
        /*]]>*/

        //监听用户注册表单提交事件
        form.on('submit(reg_form)', function (data) {
            /*
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })*/

            $.ajax({

                url: regUrl, //执行的后台动作的地址
                async: true, //是否是异步提交
                data: {param: JSON.stringify(data.field)},
                dataType: 'json',
                success: function (resp) {  //客户端压根没有收到服务器返回的字符串 "ok",为啥？
                    //console.info(resp); //给浏览器控制台输出调试内容。
                    //layer.alert(resp.meta.success);
                    if (resp.meta.success) {
                        //layer.alert('登录成功！');
                        window.location.href = regSuccessUrl;
                    } else {
                        //layer.alert('登录失败！');
                        layer.open({
                            title: '提示信息'
                            , content: '注册失败！'
                        });
                    }
                }
            });

            return false;
        });

    });
</script>
</body>

</html>